<template>
  <div class="child">
    <h2>我是Child组件</h2>
    <h4>当前的n值*10：<span v-big="n"></span></h4>
    <h4>当前的n值美化后：<span v-very-beauty="n"></span></h4>
    <h4>当前的str截取第一位后：<span v-cut="str"></span></h4>
  </div>
</template>

<script>
  export default {
    name:'Child',
    data() {
      return {
        n:8,
        str:'你好啊'
      }
    },
    directives:{
      big(element,binding){
        console.log('big',element,binding.value)
        element.innerText += binding.value * 10
      },
      'very-beauty'(element,binding){
        element.innerText = binding.value
        element.style.backgroundColor = 'red',
        element.style.color = 'yellow'
      }
    }
  }
</script>

<style scoped>
  .child {
    background-color: skyblue;
    padding: 10px;
  }
</style>